<template>
	<view class="rain-chart">
		<view class="list">
			<view v-for="(item, index) in displayData" :key="index" class="list-item">
				<view class="icons">
					<view v-for="n in getRainInfo(item.rainfall).iconCount" :key="n" class="rain-icon"
						:style="{ backgroundColor: getRainInfo(item.rainfall).color, height: getIconHeight(item.rainfall) }">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'RainChart',
		props: {
			// 支持数字、数字字符串或数字数组
			rainData: {
				type: [Number, String, Array],
				default: () => []
			},
			// 是否显示默认数据（当传入数据为空时）
			showDefault: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				defaultData: [{
						rainfall: 0
					},
					{
						rainfall: 0
					},
					{
						rainfall: 0
					},
					{
						rainfall: 0
					},
					{
						rainfall: 0
					},
					{
						rainfall: 0
					},
					{
						rainfall: 0
					}
				]
			};
		},
		computed: {
			displayData() {
				if (!this.rainData || (Array.isArray(this.rainData) && this.rainData.length === 0)) {
					return this.showDefault ? this.defaultData : [];
				}
				
				if (Array.isArray(this.rainData)) {
					return this.rainData.map(item => {
						if (typeof item === 'object' && item.rainfall !== undefined) {
							return item;
						} else {
							return { rainfall: this.parseRainfall(item) };
						}
					});
				} else {
					return [{ rainfall: this.parseRainfall(this.rainData) }];
				}
			}
		},
		methods: {
			parseRainfall(value) {
				const num = parseFloat(value);
				return isNaN(num) ? 0 : num;
			},
			getIconHeight(rainfall) {
				const info = this.getRainInfo(rainfall);
				if (info.iconCount === 1) return '120rpx';
				if (info.iconCount === 2) return '55rpx';
				if (info.iconCount === 3) return '33rpx';
				if (info.iconCount === 4) return '24rpx';
				if (info.iconCount === 5) return '18rpx';
				return '100rpx';
			},
			getRainInfo(rainfall) {
				const rain = parseFloat(rainfall);
				
				if (rain >= 0.1 && rain <= 0.9) {
					if(rain >= 0.1 && rain <= 0.5){
						return {
							color: '#52c41a',
							iconCount: 2,
						};
					}
					if(rain > 0.5 && rain <= 0.9){
						return {
							color: '#52c41a',
							iconCount: 1,
						};
					}

				} else if (rain >= 1 && rain <= 9.9) {
					if(rain >= 1 && rain <= 5){
						return {
							color: '#1890ff',
							iconCount: 2,
						};
					}
					if(rain > 5 && rain <= 9.9){
						return {
							color: '#1890ff',
							iconCount: 1,
						};
					}
				} else if (rain >= 10 && rain <= 24.9) {
					if(rain >= 10 && rain <= 15){
						return {
							color: '#075fbd',
							iconCount: 3,
						};
					}
					if(rain > 15 && rain <= 20){
						return {
							color: '#075fbd',
							iconCount: 2,
						};
					}
					if(rain > 20 && rain <= 24.9){
						return {
							color: '#075fbd',
							iconCount: 1,
						};
					}
				} else if (rain >= 25 && rain <= 49.9) {
					if(rain >= 25 && rain <= 30){
						return {
							color: '#f4e50c',
							iconCount: 5,
						};
					}
					if(rain > 30 && rain <= 35){
						return {
							color: '#f4e50c',
							iconCount: 4,
						};
					}
					if(rain > 35 && rain <= 40){
						return {
							color: '#f4e50c',
							iconCount: 3,
						};
					}
					if(rain > 40 && rain <= 45){
						return {
							color: '#f4e50c',
							iconCount: 2,
						};
					}
					if(rain > 45 && rain <= 49.9){
						return {
							color: '#f4e50c',
							iconCount: 1,
						};
					}
				} else if (rain >= 50 && rain <= 99.9) {
					if(rain >= 50 && rain <= 60){
						return {
							color: '#ff9720',
							iconCount: 5,
						};
					}
					if(rain > 60 && rain <= 70){
						return {
							color: '#ff9720',
							iconCount: 4,
						};
					}
					if(rain > 70 && rain <= 80){
						return {
							color: '#ff9720',
							iconCount: 3,
						};
					}
					if(rain > 80 && rain <= 90){
						return {
							color: '#ff9720',
							iconCount: 2,
						};
					}
					if(rain > 90 && rain <= 99.9){
						return {
							color: '#ff9720',
							iconCount: 1,
						};
					}
				} else if (rain >= 100 && rain <= 199.9) {
					if(rain >= 100 && rain <= 150){
						return {
							color: '#dd1e2b',
							iconCount: 2,
						};
					}
					if(rain > 150 && rain <= 199.9){
						return {
							color: '#dd1e2b',
							iconCount: 1,
						};
					}
				} else if (rain >= 200) {
					return {
						color: '#722ed1',
						iconCount: 1,
					};
				} else {
					return {
						color: '#d9d9d9',
						iconCount: 0,
					};
				}
			}
		}
	};
</script>

<style scoped>
	.rain-chart {
		/* padding: 20rpx; */
		/* background-color: #f5f5f5; */
		/* min-height: 100vh; */
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* padding: 30rpx; */
		/* margin-bottom: 20rpx; */
		/* background-color: #fff; */
		border-radius: 12rpx;
		/* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); */
	}

	.info {
		flex: 1;
	}

	.rainfall {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.description {
		display: block;
		font-size: 28rpx;
		color: #666;
		/* margin-bottom: 8rpx; */
	}

	.level {
		display: block;
		font-size: 24rpx;
		color: #999;
	}

	.icon-container {
		/* margin-left: 20rpx; */
	}

	.icons {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		height: 120rpx;
		justify-content: space-between;
		align-items: center;
	}

	.rain-icon {
		width: 10rpx;
		border-radius: 4rpx;
		/* border: 1rpx solid rgba(0, 0, 0, 0.1); */
	}
</style>